<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .box {
            /* 最大的盒子 */
            display: flex;
            width: 100vw;
            height: 100vh;
            flex-direction: column;
            background-color: #e6e8e8;
        }

        /* logo 部分 */
        .top {
            width: 100vw;
            height: 60px;
            display: flex;
            background-color: #FF8A00;
        }

        .logo {
            margin-top: 10px;
            margin-left: 30px;
            flex: 1;
        }

        .my {
            flex: 1;
            margin-top: 10px;
            margin-left: 85px;

        }

        .my img {
            margin-right: 20px;
        }

        /* 搜索框开始 */
        .banner {
            width: 100vw;
            height: 263px;
            position: relative;
        }

        .sousuo {
            width: 300px;
            height: 30px;
            bottom: 20px;
            border-radius: 5px;
            border: 2px solid black;
            position: absolute;
            background-color: #fff;
            left: 30px;
        }

        .sousuo img {
            width: 20px;
            padding-left: 8px;
            padding-top: 5px;
        }

        .banner input {
            position: absolute;
            left: 35px;
            bottom: 5px;
            width: 200px;
            height: 20px;
            border: 0;
            outline: none;
        }

        /* 二手房开始*/
        .rsf {
            display: flex;
            height: 100px;
            background-color: #FF8A00;
            justify-content: space-around;
        }

        .rsf img {
            width: 50px;
            padding-top: 20px;
        }

        .p1 {
            text-align: center;
            font-size: 12px;
            color: #fff;
        }

        /* 找房无忧 */
        .fz img {
            width: 375px;
            padding-top: 8px;
            padding-bottom: 8px;
        }

        /* 热门房源 */
        .remen {
            width: 100vw;
            height: 500px;
            background-color: bisque;
        }

        .remen>div:nth-of-type(1) {
            background-color: #FF8A00;
            color: #fff;
            height: 70px;
            font-weight: bold;
        }

        .p2 {
            padding-left: 30px;
            font-size: 20px;
            padding-top: 10px;
        }

        .p3 {
            font-size: 12px;
            padding-left: 30px;
            padding-top: 5px;
        }

        .remen>div:nth-of-type(2),
        .remen>div:nth-of-type(3) {
            width: 340px;
            height: 140px;
            margin-left: 17px;
            display: flex;
            border-bottom: 2px solid red;
        }

        .remen>div:nth-of-type(4) {
            width: 340px;
            height: 140px;
            margin-left: 17px;
            display: flex;
        }

        .b1 {
            width: 100px;
            padding-top: 25px;
        }

        .b2 {
            padding-top: 15px;
            padding-left: 10px;
            flex: 3;
        }

        .b2 h3 {
            font-size: 22px;
        }

        .rmspan {
            line-height: 30px;
        }

        .rmspan1 {
            float: right;
            font-weight: bold;
            color: #FF8A00;

        }

        .p4 {
            color: rgb(155, 159, 159);
            font-weight: 500;
            display: inline-block;
        }

        .p5 {
            color: rgb(155, 159, 159);
            font-weight: 500;
            display: inline-block;

            float: right;
        }

        /* 热门关注 */
        .guanzhu {
            width: 100vw;
            background-color: #fff;
            height: 70px;
            display: flex;
            border-bottom: 1px solid #FF8A00;
        }

        .guanzhu div {
            width: 190px;
            height: 70px;
            text-align: center;
            line-height: 70px;
            font-size: 25px;
        }

        .guanzhu div:hover {
            border-bottom: 2px solid #FF8A00;
            color: #FF8A00;
        }

        .li {
            margin-top: 1px;
            width: 100vw;
            height: 180px;
            background-color: #fff;
            display: flex;
        }

        .li div {
            width: 200px;
            height: 200px;

        }

        .li li {
            list-style-type: none;
            padding-left: 20px;
            padding-top: 20px
        }

        /* ------- */
        /* 底部 */
        .btm {
            width: 375px;
            position: relative;
            height: 200px;
            background-color: rgb(57, 57, 58);
        }

        .btm1 {
            width: 320px;
            height: 50px;
            margin-left: 30px;
            line-height: 50px;
            font-size: 20px;
            color: rgb(132, 129, 129);
            border-bottom: 2px solid rgb(132, 129, 129);
        }

        .btm2 {
            display: flex;
        }

        .btm2 div {
            width: 150px;
            height: 70px;
            margin-left: 25px;
            padding-top: 20px;
            position: relative;
        }

        .btm2 img {
            display: block;
            width: 30px;
        }

        .sj {
            position: absolute;
            left: 50px;
            bottom: 30px;
            color: rgb(132, 129, 129);
        }

        .btm3 {
            width: 375px;
            height: 50px;
            color: #fff;
            text-align: center;
        }

        .btm4 {
            width: 375px;
            height: 60px;
            position: absolute;
            bottom: 0px;
            background-color: rgba(26, 24, 24, 0.8);
        }

        .img-1 {
            width: 40px;
            position: absolute;
            top: 10px;
            left: 40px;

        }

        .btm4 button {
            width: 120px;
            height: 60px;
            font-size: 20px;
            background-color: #FF8A00;
            color: #fff;
            position: absolute;
            right: 0;
            border: 0;
            top: 0;
            font-weight: bold;
        }

        .btmspan {
            position: absolute;
            color: rgb(220, 209, 209);
            font-size: 20px;
            left: 100px;
            top: 5px;
        }
        .btmspan1{
            position: absolute;
            color: rgb(220, 209, 209);
            font-size: 14px;
            left: 100px;bottom: 10px;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="top">
            <!-- logo 上部 -->
            <div class="logo">
                <img src="../image/index/logo.jpg" alt="" width="130px">
            </div>
            <div class="my">
                <img src="../image/index/my.jpg" alt="" width="35px" height="40px">
                <img src="../image/index/xiazai.jpg" alt="" width="35px" height="40px">
            </div>
        </div>
        <div class="banner">
            <!-- 搜索框 -->
            <img src="../image/index/banner.png" alt="" width="375px">
            <div class="sousuo"><img src="../image/index/seach.jpg" alt=""><input type="text"
                    placeholder="输入小区或商圈名开始找房喽！"></div>
        </div>
        <div class="rsf">
            <!-- 二手房 -->
            <div><img src="../image/index/index_03.png" alt="">
                <p class="p1">二手房</p>
            </div>
            <div><img src="../image/index/index_05.png" alt="">
                <p class="p1">新房</p>
            </div>
            <div><img src="../image/index/index_07.png" alt="">
                <p class="p1">租房</p>
            </div>
            <div><img src="../image/index/index_09.png" alt="">
                <p class="p1">卖房</p>
            </div>
        </div>
        <div class="fz">
            <!-- 找房无忧 -->
            <img src="../image/index/banner2.png" alt="">
        </div>
        <div class="remen">
            <div>
                <p class="p2">热门房源</p>
                <p class="p3">人気のリスティング</p>
            </div>
            <div>
                <div class="b1"><img src="../image/index/img1.jpg" alt="" width="100px"></div>
                <div class="b2">
                    <h3>文化部中间层 一层带...</h3>
                    <span class="rmspan">2室1厅96m南北²</span>
                    <span class="rmspan1">1105万</span>
                    <p class="p4">红庙北里</p>
                    <p class="p5">14268元/平</p>
                </div>
            </div>
            <div>
                <div class="b1"><img src="../image/index/img2.png" alt="" width="100px"></div>
                <div class="b2">
                    <h3>光大水墨 精装复式...</h3>
                    <span class="rmspan">4室2厅164m²朝南</span>
                    <span class="rmspan1">5624万</span>
                    <p class="p4">汤臣一品</p>
                    <p class="p5">120000元/平</p>
                </div>
            </div>
            <div>
                <div class="b1"><img src="../image/index/img3.png" alt="" width="100px"></div>
                <div class="b2">
                    <h3>文化部中间层 一层带...</h3>
                    <span class="rmspan">2室1厅96m²南北</span>
                    <span class="rmspan1">320万</span>
                    <p class="p4">汤臣二品</p>
                    <p class="p5">15564元/平</p>
                </div>
            </div>

        </div>
        <div class="guanzhu">
            <div>热门关注</div>
            <div>友情链接</div>
        </div>
        <div class="li">
            <div>
                <li>北京二手房</li>
                <li>北京二手房价</li>
                <li>海淀日租房</li>
                <li>汤臣一品</li>
            </div>
            <div>
                <li>北京二手房</li>
                <li>北京二手房价</li>
                <li>海淀日租房</li>
                <li>汤臣一品</li>
            </div>

        </div>
        <div class="btm">
            <div class="btm1">北京找房无忧 > 首页</div>
            <div class="btm2">
                <div><img src="../image/index/apple.png" alt=""><span class="sj">iPhone<br>客户端</span></div>
                <div><img src="../image/index/android.png" alt=""><span class="sj">Android <br>&nbsp;&nbsp;客户端 </span>
                </div>
            </div>
            <div class="btm3">
                <p>AAAAAAAAAAAAAAA</p>
                <p>AAAAAAAAAAAAAAAAAAA</p>
            </div>
            <div class="btm4">
                <img src="../image/index/close.png" width="15px" alt="">
                <img class="img-1" src="../image/index/download.png" alt="">
                <span class="btmspan">找房无忧</span>
                <br>
                <span class="btmspan1">市场行情，一手掌握</span>
                <button>免费下载</button>
            </div>
        </div>

    </div>
</body>

</html>